/** * Create by mzq * Description: 每月新增服务数量 * Date: 2024/9/13 10:51 * Update: 2024/9/13
10:51 */
<template>
  <div id="myLine" class=""></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, watch } from 'vue'

const props = defineProps({
  data: Object
})

// 月份数组
const monthsArr = ref([])
// 数据Arr
const numberArr = ref([])

const init = () => {
  let myChart = echarts.init(document.getElementById('myLine'))
  let options = {
    color: ['#80FFA5'],
    title: {
      text: ''
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      top: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: monthsArr.value
      }
    ],
    yAxis: [
      {
        type: 'value',
        interval: 200,
        // y轴横向 标线
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.16)'
          }
        }
      }
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          color: '#39FFDC'
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#39FFDC'
            },
            {
              offset: 1,
              color: '#00091A'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: numberArr.value
      }
    ]
  }
  myChart.setOption(options, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

watch(
  () => props.data,
  (val) => {
    // 获取前6个月的月份
    function getLast7Months() {
      const now = new Date()
      const months = []
      for (let i = 0; i < 6; i++) {
        const month = now.getMonth() - i // 获取当前月份减去i个月
        months.push(`${month < 10 ? '0' : ''}${month + 1}月`) // 构造月份字符串并添加到数组前面
      }
      return months
    }

    monthsArr.value = getLast7Months()

    numberArr.value = val.monthlyDeviceCnt

    init()
  }
)
</script>
<style scoped lang="scss">
#myLine {
  width: 1.0729rem /* 206/192 */;
  height: 0.8333rem /* 160/192 */;
}
</style>